<!--改单订单项列表-->
<template>
  <div class="">
    <el-form
      ref="saleCaseFormRef"
      :model="Form"
      label-position="left"
      label-width="1rem"
    >
      <sim-form
        class="assembly-box"
        :Form="Form"
        isbtn
        @queryMethods="getqryCustList"
      >
      </sim-form>
    </el-form>
    <!--批量改单-->
    <dic-popover
      :config="morePopConfig"
      class="plbg"
      :row="moreRow"
    ></dic-popover>
    <DicTable
      ref="carordertable"
      stripe
      highlight-current-row
      highlight-hover-row
      border
      header-row-class-name="header-row-class"
      row-class-name="ne-row-class"
      :columnData="carOrdertbs.tableColumns"
      :tableData="carOrdertbs.tableData"
      :loading="carOrdertbs.tableLoading"
      :currentPage="carOrdertbs.tablePage.currentPage"
      :pageSize="carOrdertbs.tablePage.pageSize"
      :totalResult="carOrdertbs.tablePage.totalResult"
      :pager="true"
      @on-page-change="handlePageChange"
      @cell-click="Onrowclick"
      @checked-data="checkBoxdata"
      resizable
    >
      <!--改单按钮及浮窗-->
      <template #operation="{ row }">
        <div class="clearfix operation">
          <div class="position">
            <dic-popover :config="popConfig" :row="row"></dic-popover>
          </div>
        </div>
      </template>
      <!--流水号-->
      <template #custSoNumber="{ row }">
        <el-link type="primary">{{
          row.custSoNumber + "(" + row.orderItemSeq + ")"
        }}</el-link>
      </template>
      <!--要求完成时间-->
      <template #orderDate="{ row }">
        <span v-if="row.lastStateCd && row.lastStateCd != '50030003'">{{
          row.reqOrderDate ? row.reqOrderDate.split(" ")[0] : ""
        }}</span>
        <span v-else>{{
          row.orderDate ? row.orderDate.split(" ")[0] : ""
        }}</span>
      </template>
    </DicTable>
  </div>
</template>

<script>
import SimForm from "@/components/public/SimForm";
import DicPopover from "@/components/order/PopoVer";
import DicTable from "@/components/public/DicTable";
import CommonUtil from "@/utils/common";
import OrderService from "@/api/order/OrderService.js";
import { mapState, mapGetters } from "vuex";
export default {
  name: "ChangeOrder",
  props: {
    customerOrder: {
      type: Object,
    },
  },
  data() {
    return {
      Form: {
        /**
         * type类型
         *         jmIpt精确模糊 input
         *         Ipt普通 input
         *         select 选择框
         *
         */
        //订单流水号  待定 ，显示是受理流水
        //IDC群号
        accNum: {
          type: "Ipt",
          cName: "设备号",
          cValue: "",
        },
      },

      // 订单order列表
      carOrdertbs: {
        tableColumns: [
          { type: "checkbox", width: 50 },
          { slotName: "custSoNumber", title: "流水号", width: 160 },
          { field: "offerName", title: "销售品名称", width: 100 },
          {
            slotName: "operation",
            title: "操作",
            width: 100,
            headerAlign: "center",
            // fixed: "right",
          },
          { slotName: "orderDate", title: "要求完成时间", width: 150 },
          { field: "regionRange", title: "通达地点", width: 100 },
          { field: "serviceOfferName", title: "登记事项", width: 100 },
          { field: "accNum", title: "设备号", width: 100 },
          { field: "useCustName", title: "甲端用户名称", width: 100 },
          { field: "contactName", title: "甲端联系人", width: 100 },
          { field: "mobilePhone", title: "甲端联系人电话", width: 100 },
          { field: "addressDesc", title: "甲端装机地址", width: 100 },
          { field: "zUseCustName", title: "乙端用户名称", width: 100 },
          { field: "zContactName", title: "乙端联系人", width: 100 },
          { field: "zMobilePhone", title: "乙端联系人电话", width: 100 },
          { field: "zAddressDesc", title: "乙端装机地址", width: 100 },
          { field: "rate", title: "速率", width: 100 },
        ],
        tableData: [],
        tableLoading: false,
        tablePage: {
          currentPage: 1,
          pageSize: 10,
          totalResult: 0,
        },
      },

      //服务弹窗配置
      popConfig: {
        modType: "50200002",
        name: "改单",
        placement: "bottom", //弹窗位置
        title: "", //弹窗标题
        width: "350", //弹窗宽度
        trigger: "click", //弹窗弹出方式 click/focus/hover/manual
        content: "", //弹窗内容
        // row:'',//表格行数据
        gutter: 10, //标签之间间隔
        span: 12, //每行标签个数，一行按24等分，12表示2个
      },

      morePopConfig: {
        modType: "50200002",
        name: "批量改单",
        placement: "bottom", //弹窗位置
        title: "", //弹窗标题
        width: "350", //弹窗宽度
        trigger: "click", //弹窗弹出方式 click/focus/hover/manual
        content: "", //弹窗内容
        // row:'',//表格行数据
        gutter: 10, //标签之间间隔
        span: 12, //每行标签个数，一行按24等分，12表示2个
      },

      msJson: "", //列表传参
      moreRow: {},
    };
  },
  computed: {
    ...mapState("orders", ["orderPosInfo", "CARRY_ROW"]),
    ...mapState("user", ["user"]),
    ...mapGetters(["orderPosInfochange"]),
  },
  components: {
    DicTable,
    SimForm,
    DicPopover,
  },
  created() {},
  watch: {
    CARRY_ROW: function () {
      if (!this.customerOrder) {
        this.msJson = {
          statusCds: "200000,300000", //订单状态
          custSoNumber: this.CARRY_ROW.custSoNumber, //流水号  从上个页面带回
          handleOrgId: this.user.orgId,
          custId: this.orderPosInfo.custId || "204",
          batchNbr: "", //批次号
          accNum: "", //设备号,没有不传
        };
      } else {
        this.msJson = {
          statusCds: "200000,300000,401498", //订单状态
          custSoNumber: this.CARRY_ROW.custSoNumber, //流水号  从上个页面带回
          custOrderId: this.customerOrder.custOrderId,
          handleOrgId: this.user.orgId,
          custId: this.orderPosInfo.custId || "204",
          batchNbr: "", //批次号
          accNum: "", //设备号,没有不传
          continueModifyFlag: "1",
        };
      }

      this.getqryCustList();
    },

    msJson: function () {
      this.getqryCustList();
    },
  },
  mounted() {
    if (!this.customerOrder) {
      this.msJson = {
        statusCds: "200000,300000", //订单状态
        custSoNumber: this.CARRY_ROW.custSoNumber, //流水号  从上个页面带回
        handleOrgId: this.user.orgId,
        custId: this.orderPosInfo.custId || "204",
        batchNbr: "", //批次号
        accNum: "", //设备号,没有不传
      };
    } else {
      this.msJson = {
        statusCds: "200000,300000,401498", //订单状态
        custSoNumber: this.CARRY_ROW.custSoNumber, //流水号  从上个页面带回
        custOrderId: this.customerOrder.custOrderId,
        handleOrgId: this.user.orgId,
        custId: this.orderPosInfo.custId || "204",
        batchNbr: "", //批次号
        accNum: "", //设备号,没有不传
        continueModifyFlag: "1",
      };
    }
    this.getqryCustList();


  },
  methods: {
    // 查询列表
    async getqryCustList() {
      this.carOrdertbs.tableLoading = true;
      let param = CommonUtil.paramsFun(1, this.Form, "pageIndex", this.carOrdertbs.tablePage.currentPage, this.carOrdertbs.tablePage.pageSize
      );
      const result = await OrderService.qryOrderItem({
        ...this.msJson,
        ...param,
      });
      this.carOrdertbs.tableLoading = false;
      if (result.code === 200 && result.meta.offerOrderItems) {
        this.carOrdertbs.tableData = result.meta.offerOrderItems;
        this.carOrdertbs.tablePage.currentPage = JSON.parse(
          result.meta.pageInfo.pageIndex
        );
        this.carOrdertbs.tablePage.totalResult = JSON.parse(
          result.meta.pageInfo.rowCount
        );
      } else {
        this.$message({
          type: "error",
          message: "请求失败!" + result.meta.msg,
        });
      }
    },
    handlePageChange({ currentPage, pageSize }) {
      this.carOrdertbs.tablePage.currentPage = currentPage;
      this.carOrdertbs.tablePage.pageSize = pageSize;
      this.getqryCustList();
    },
    Onrowclick(data) {
      this.ppmRows = data.row;
      //跳转产品详情
      let optionId = "";
      sessionStorage.setItem("changeRow", JSON.stringify(data.row));
      if (data.row.lastStateCd == "50030003") {
        optionId = "313";
      } else {
        optionId = "311";
      }
      if (data.column.title == "流水号") {
        const ppmCondition = {
          productId: data.row.prodId ? data.row.prodId : 80008007,
          serviceOfferId: "4010100000",
          modType: "50200003",
          optionId: optionId, //需求单审核前后/订单审核前后/产品实例库  310，311，312，313，314
        };
        sessionStorage.setItem("ppmCondition", JSON.stringify(ppmCondition));
        sessionStorage.setItem("detailCondition", JSON.stringify(ppmCondition)); //解决详情刷新缓存请求条件被覆盖问题
        window.open("orders.html?router=productinfo", "_blank");
      }
    },
    checkBoxdata(data, checked) {
      //表格复选框事件


      let orderItemId = [];
      let offerInstId = [];
      let accNum = [];
      for (let i = 0; i < data.length; i++) {
        this.moreRow.prodId = data[0].prodId;
        if (data[i].prodId == this.moreRow.prodId) {
          orderItemId.push(data[i].orderItemId);
          offerInstId.push(data[i].offerInstId);
          accNum.push(data[i].accNum || "");
          this.moreRow.lastStateCd = data[i].lastStateCd;
          this.moreRow.custId = data[i].custId;
          this.moreRow.custSoNumber = data[i].custSoNumber;
          this.moreRow.offerId = data[i].offerId;
        } else {
          this.$alert("只能选择相同产品ID的单子", "警告", {
            type: "warning",
            confirmButtonText: "关闭",
          });
          checked = false;
        }
      }
      this.moreRow.orderItemId = orderItemId.toString();
      this.moreRow.offerInstId = offerInstId.toString();
      this.moreRow.accNum = accNum.toString();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .vxe-table--render-default .vxe-body--column:not(.col--ellipsis),
.vxe-table--render-default .vxe-footer--column:not(.col--ellipsis) {
  padding: 0.05rem !important;
}
.radio-mt {
  margin-top: 0.1rem;
}
.select-box {
  width: 1rem;
  padding: 0;
}
.ne-operation-a {
  color: $blue;
  &:hover {
    text-decoration: underline;
    color: $blue;
  }
}

.operation {
  width: 100%;
  padding: 0 10px !important;
  height: 0.34rem;
  box-sizing: border-box;
  position: absolute;
  top: 20%;
  left: 0;
  .position {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    position: relative;
    text-align: center;
  }
}

.plbg {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
}
</style>
